<template>
  <div class="III-III-III">
    <table class="III-III-III__table">
      <tr class="III-III-III__table-trone">
        <td class="III-III-III__table-trone-td"
            colspan="10">
          <div class="III-III-III__table-trone-td-title">
            III-3-3其他代表性科研项目
            <span class="III-III-III__table-trone-td-title-tips">
              （限40项）
            </span>
          </div>
        </td>
      </tr>
      <tr class="III-III-III__table-th">
        <td class="III-III-III__table-th-tdone">
          序号
        </td>
        <td class="III-III-III__table-th-tdtwo">
          项目来源
        </td>
        <td class="III-III-III__table-th-tdthree">
          项目类型
        </td>
        <td class="III-III-III__table-th-tdfour">
          项目（课题）名称
        </td>
        <td class="III-III-III__table-th-tdfive">
          项目编号
        </td>
        <td class="III-III-III__table-th-tdsix">
          负责人
        </td>
        <td class="III-III-III__table-th-tdseven">
          立项<br>时间
        </td>
        <td class="III-III-III__table-th-tdeight">
          起讫<br>时间
        </td>
        <td class="III-III-III__table-th-tdnine">
          合同<br>经费
        </td>
        <td class="III-III-III__table-th-tdten">
          到账<br>经费
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="III-III-III__table-th-add-button"
                   circle
                   @click.prevent="addMaterList"/>
      </tr>
      <tr v-for="(item, index) in cccs"
          :key="index"
          class="III-III-III__table-tr">
        <td class="III-III-III__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="III-III-III__table-tr-tdtwo">
          <el-input
            v-model="item.projectSource"
            type="textarea"
            autosize
            placeholder="请填写项目来源"
            :maxlength="50"
            class="III-III-III__table-tr-tdtwo-input"/>
        </td>
        <td class="III-III-III__table-tr-tdthree">
          <el-input
            v-model="item.projectType"
            class="III-III-III__table-tr-tdthree-input"
            type="textarea"
            autosize
            placeholder="XXXX"
            :maxlength="30"/>
        </td>
        <td class="III-III-III__table-tr-tdfour">
          <el-input
            v-model="item.entryName"
            class="III-III-III__table-tr-tdfour-input"
            type="textarea"
            autosize
            placeholder="XXXX"
            :maxlength="50"/>
        </td>
        <td class="III-III-III__table-tr-tdfive">
          <el-input
            v-model="item.itemNo"
            class="III-III-III__table-tr-tdfive-input"
            type="textarea"
            placeholder="XXXXXX"
            autosize
            :maxlength="30"/>
        </td>
        <td class="III-III-III__table-tr-tdsix">
          <el-input
            v-model="item.projecter"
            class="III-III-III__table-tr-tdsix-input"
            type="textarea"
            placeholder="王五"
            autosize
            :maxlength="20"/>
        </td>
        <td class="III-III-III__table-tr-tdseven">
          <el-input
            v-model="item.establishTime"
            class="III-III-III__table-tr-tdseven-input"
            type="input"
            placeholder="201906"
            :maxlength="6"/>
        </td>
        <td class="III-III-III__table-tr-tdeight">
          <el-input
            v-model="item.startEndTime"
            class="III-III-III__table-tr-tdeight-input"
            type="textarea"
            placeholder="202001-202312"
            autosize
            :maxlength="13"/>
        </td>
        <td class="III-III-III__table-tr-tdnine">
          <el-input
            v-model="item.contractFund"
            class="III-III-III__table-tr-tdnine-input"
            type="textarea"
            autosize
            placeholder="100"
            oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"/>
        </td>
        <td class="III-III-III__table-tr-tdten">
          <el-input
            v-model="item.receivedFund"
            class="III-III-III__table-tr-tdten-input"
            type="textarea"
            autosize
            placeholder="100"
            oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="III-III-III__table-tr-delete-button"
                   circle
                   @click.prevent="deleteMaterItem(index)"/>
      </tr>
    </table>
    <div class="III-III-III__explain">
      <span class="III-III-III__explain-strong">
        说明：
      </span>
      本表填写评估期内本单位牵头立项的其他代表性科研项目（如中央和国家机关委托项目、有关行业和重要企业委托项目等）。
    </div>
  </div>
</template>

<script>
import { getPageData } from '@/utils/getData.js'
export default {
  watch: {
    cccs: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })
    this.cccs = await getPageData('cccs')
    loading.close()
  },
  data () {
    return {
      cccs: [
        { projectSource: '', projectType: '', entryName: '', itemNo: '', projecter: '', establishTime: '', startEndTime: '', contractFund: '', receivedFund: '' }
      ]
    }
  },
  methods: {
    addMaterList () {
      if (this.cccs.length < 40) {
        this.cccs.push({ projectSource: '', projectType: '', entryName: '', itemNo: '', projecter: '', establishTime: '', startEndTime: '', contractFund: '', receivedFund: '' })
      } else {
        Element.toast('最多40个！！！')
      }
    },
    deleteMaterItem (index) {
      if (this.cccs.length > 1) {
        this.cccs.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/page/3-3-3.less';
</style>
